<template>
	<div>
		<div id="app">
			<el-container>
				<el-main>
					<el-carousel :interval="5000" arrow="always">
						<el-carousel-item v-for="(item,index) in img" :key="index">
							<h3>
								<img :src="item.src" alt="">
							</h3>
						</el-carousel-item>
					</el-carousel>
					<div class="move">
						<h1>MOVIE</h1>
						<div class="move40" style="position: relative;">
							<div style="float: left;">
								<!-- <router-link>正在放映40部</router-link> -->
								<a href="#">正在放映40部</a>
							</div>

							<div style="float: left;padding-left: 80px;">
								<!-- <router-link>即将上映90部</router-link> -->
								<a href="#">即将上映90部</a>
							</div>
							<!-- <fang></fang> -->
							<router-view></router-view>
						</div>
					</div>
					<div id="text1" style="position: absolute; top: 50px; left: 300px;">
						<br>
						<p>
							<h1 style="z-index: 7; height: 50px;text-align: left;">如果声音不记得</h1>
							<h1 style="z-index: 7; height: 40px;text-align: left">The End of Endless Love</h1>
							<p style="z-index: 7; height: 30px;text-align: left">继《悲伤逆流成河》后郭敬明与落落再度合作</p>
							<p style="z-index: 7; height: 30px;text-align: left">102分钟-爱情/奇幻</p>
							<p style="z-index: 7; height: 20px;text-align: left">2D</p>
							<p style="z-index: 7; height: 20px;text-align: left">2020年12月04日上映</p>

						</p>
					</div>
					<div class="main2">
						<ul class="uli">
							<li>
								<router-link to="/film01" style="color: white;">
									<div class="_1SPsM" title="紧急救援"></div><img src="../images/031.jpg" alt="紧急救援">
								</router-link>
								<p style="position: absolute;top: 60px;left: 100px;">
									紧急救援
								</p>
							</li>
							<li>
								<router-link to="/film02" style="color: white;">
									<div class="_1SPsM" title="神奇女侠"></div><img src="../images/032.jpg" alt="神奇女侠">
								</router-link>
								<p style="position: absolute;top: 60px;left: 360px;">
									神奇女侠
								</p>
							</li>
							<li>
								<a href="/film03" target="_blank">
									<div class="_1SPsM" title="哆啦A梦"></div><img src="../images/033.jpg" alt="哆啦A梦">
								</a>
								<p style="position: absolute;top: 60px;left: 620px;">
									哆啦A梦</p>
							</li>

							<li>
								<a href="/film04" target="_blank">
									<div class="_1SPsM" title="明天你是否爱我"></div><img src="../images/034.jpg" alt="明天你是否爱我">
								</a>
								<p style="position: absolute;top: 60px;left: 840px;">
									明天你是否爱我</p>
							</li>

							<li>
								<a href="/film05" target="_blank">
									<div class="_1SPsM" title="疯狂的原始人2"></div><img src="../images/035.jpg" alt="疯狂的原始人2">
								</a>
								<p style="position: absolute;top: 60px;left: 1100px;">
									疯狂的原始人</p>
							</li>
						</ul>
					</div>
				</el-main>
			</el-container>
		</div>
		<div class="app2">
			<fotter></fotter>
		</div>
	</div>
</template>


<script>


	// import fang from './fang60.vue'
	import fotter from "./common/footer.vue"
	export default {
		components: {
			fotter
		},
		data() {
			return {
				img: [{
						src: require('../images/003.jpg')
					}, {
						src: require('../images/004.jpg')
					},
					{
						src: require('../images/005.jpg')
					}
				],
				// d1: ['公司地址:山东省济南市历城区银河大厦', '***全国客服热线:400-000-888', '***全国投诉电话:400-000-999', '***服务监督电话:400-000-555']

			}
		},
		
	}
</script>

<style scoped>
	.main2 ul li:hover {
		box-shadow: 0 0 20px -5px;
	}

	.uli {
		position: absolute;
		top: 800px;
		left: 160px;
	}

	.uli img {
		width: 100%;
		height: 100%;
	}

	.uli li:hover {
		border-top-color: #367dff;
		border-right-color: #367dff;
		-webkit-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
		transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
	}

	.uli li {
		float: left;
		width: 200px;
		height: 200px;
		margin-left: 50px;
		border: 1px solid rosybrown;
	}

	.move40 {
		margin-top: -310px;
		font-size: 18px;
		margin-left: 580px;
	}

	.move {
		margin: 0px;
	}

	.move h1 {
		margin-top: -140px;
		font-size: 38px;
		color: rgb(243, 216, 114);
	}

	.card1 {
		margin-left: 300px;

	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 14px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 480px;
		background-color: #B3C0D1;
		border: 0px;
	}
   


	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 360px;
		height: 1000px;
	}


	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>
